<!--
 * @Author: zi.yang
 * @Date: 2021-03-11 21:03:56
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-03-13 00:32:43
 * @Description: In User Settings Edit
 * @FilePath: \vue-music\src\components\testVue3\App.vue
-->
<template>
  <div id="app">
    <div v-show="show">
      <test-one></test-one>
      <test-two></test-two>
      <test-three></test-three>
      <test-four></test-four>
      <test-toref></test-toref>
      <test-torefs></test-torefs>
      <test-computed></test-computed>
      <test-event></test-event>
      <test-watch></test-watch>
      <test-lief></test-lief>
      <test-use></test-use>
    </div>
    <button @click="showTest()">{{ this.show ? '隐藏测试方法' : '显示测试方法' }}</button>
  </div>
</template>

<script>
import testOne from './state/test-one.vue';
import testTwo from './state/test-two.vue';
import testThree from './state/test-three.vue';
import testFourVue from './state/test-four.vue';
import testTorefVue from './state2/test-toref.vue';
import testTorefsVue from './state2/test-torefs.vue';
import testComputedVue from './state2/test-computed.vue';
import testEventVue from './state2/test-event.vue';
import testWatchVue from './state3/test-watch.vue';
import testLiefVue from './state3/test-lief.vue';
import testUseVue from './state3/test-use.vue';

export default {
  name: 'App',
  data() {
    return {
      show: true,
    };
  },
  methods: {
    showTest() {
      this.show = !this.show;
    },
  },
  components: {
    'test-one': testOne,
    'test-two': testTwo,
    'test-three': testThree,
    'test-four': testFourVue,
    'test-toref': testTorefVue,
    'test-torefs': testTorefsVue,
    'test-computed': testComputedVue,
    'test-event': testEventVue,
    'test-watch': testWatchVue,
    'test-lief': testLiefVue,
    'test-use': testUseVue,
  },
};
</script>

<style></style>
